import * as echarts from 'echarts';

const GREEN_COLOR = "#009D63"
const RED_COLOR = "#F96E5B"
const BLUE_COLOR = "#3481B8"
const BLUE_RGB = '52,129,184'
const RED_RGB = '248,111,92'
const GREEN_RGB = '0,157,99'

const NEW_GREEN1_COLOR = "#91CC75"
const NEW_GREEN2_COLOR = "#3BA272"
const NEW_GREEN3_COLOR = "#ACD897"
const NEW_RED_COLOR = "#EE6666"
const NEW_BLUE1_COLOR = "#5470C6"
const NEW_BLUE2_COLOR = "#73C0DE"
const NEW_YELLOW_COLOR = "#FAC858"
const NEW_ORANGE_COLOR = "#FC8452"
const NEW_PURPLE_COLOR = "#9A60B4"
const NEW_PINK_COLOR = "#DA0D68"

const NEW_GREEN1_RGB = "145,204,117"
const NEW_GREEN2_RGB = "59,162,114"
const NEW_GREEN3_RGB = "172,216,151"
const NEW_RED_RGB = "238,102,102"
const NEW_BLUE1_RGB = "84,112,198"
const NEW_BLUE2_RGB = "115,192,222"
const NEW_YELLOW_RGB = "250,200,88"
const NEW_ORANGE_RGB = "252,132,82"
const NEW_PURPLE_RGB = "154,96,180"
const NEW_PINK_RGB = "218,13,104"


const colors = [GREEN_COLOR, RED_COLOR, `rgba(${GREEN_RGB}, 0.3)`]
const newcolors = [NEW_GREEN1_COLOR, NEW_BLUE2_COLOR, NEW_RED_COLOR, NEW_YELLOW_COLOR, NEW_GREEN2_COLOR, NEW_ORANGE_COLOR, NEW_BLUE1_COLOR, NEW_PURPLE_COLOR, NEW_GREEN3_COLOR, NEW_PINK_COLOR]

export function DashboardChargingOption(data) {
    const { xAxis, curWeek, lastWeek } = data;
    return {
        title: {
            text: "充电量趋势",
            left: 30
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 30,
            bottom: 30,
        },
        xAxis: {
            type: 'category',
            data: xAxis,
            boundaryGap: false,
            splitNumber: 7,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true
            }
        },
        legend: {
            data: ["上周", "本周"],
            right: 30
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: curWeek,
            name: '本周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: GREEN_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false
        }, {
            data: lastWeek,
            name: '上周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: RED_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: `rgba(${RED_RGB},0.8)`
                }, {
                    offset: 0.9,
                    color: `rgba(${RED_RGB},0)`
                }])
            }
        }]
    }
}

export function OrderWeekOption(data) {
    const { xAxis, curWeek, lastWeek } = data;
    return {
        title: {
            text: "订单量周统计",
            left: 20
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 30,
            bottom: 30,
        },
        xAxis: {
            type: 'category',
            data: xAxis,
            boundaryGap: false,
            splitNumber: 7,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true
            }
        },
        legend: {
            data: ["上周", "本周"],
            right: 30
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: curWeek,
            name: '本周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: NEW_GREEN1_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false
        }, {
            data: lastWeek,
            name: '上周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: NEW_BLUE2_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: `rgba(${NEW_BLUE2_RGB},0.8)`
                }, {
                    offset: 0.9,
                    color: `rgba(${NEW_BLUE2_RGB},0)`
                }])
            }
        }]
    }
}

export function OrderDayOption(data) {
    const { xAxis, curDay } = data;
    return {
        title: {
            text: "订单量日统计",
            left: 20
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 30,
            bottom: 30,
        },
        xAxis: {
            type: 'category',
            data: xAxis,
            //boundaryGap: false,
            splitNumber: 7,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true
            }
        },
        legend: {
            data: ["时段"],
            right: 20
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: curDay ,
            name: '时段',
            type: 'bar',
            smooth: true,
            itemStyle: {
                barBorderRadius: 4,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: NEW_BLUE2_COLOR // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                },
            },
            barWidth: 15,
            showSymbol: false,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: `rgba(${RED_RGB},0.8)`
                }, {
                    offset: 0.9,
                    color: `rgba(${RED_RGB},0)`
                }])
            }
        }]
    }
}

export function WarningWeekOption(data) {
    const { xAxis, curWeek, lastWeek } = data;
    return {
        title: {
            text: "报警量周统计",
            left: 20
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 30,
            bottom: 30,
        },
        xAxis: {
            type: 'category',
            data: xAxis,
            boundaryGap: false,
            splitNumber: 7,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true
            }
        },
        legend: {
            data: ["上周", "本周"],
            right: 30
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: curWeek,
            name: '本周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: NEW_YELLOW_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false
        }, {
            data: lastWeek,
            name: '上周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: NEW_RED_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: `rgba(${NEW_RED_RGB},0.8)`
                }, {
                    offset: 0.9,
                    color: `rgba(${NEW_RED_RGB},0)`
                }])
            }
        }]
    }
}

export function WarningTypeWeekOption(data) {
    const { xAxis, temp,voltage,smog } = data;
    return {
        title: {
            text: "报警类型周统计",
            left: 20
        },
        color:[NEW_RED_COLOR,NEW_ORANGE_COLOR,NEW_YELLOW_COLOR],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['温度','电压','烟雾'],
            right:10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: xAxis
        },
        series: [
            {
                name: '温度',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                barWidth: 15,
                emphasis: {
                    focus: 'series'
                },
                data: temp
            },
            {
                name: '电压',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                barWidth: 15,
                emphasis: {
                    focus: 'series'
                },
                data: voltage
            },
            {
                name: '烟雾',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                barWidth: 15,
                emphasis: {
                    focus: 'series'
                },
                data: smog
            }
        ]
    }
}

export function StationChargeOption(data) {
    const { xAxis, curWeek, lastWeek } = data;
    return {
        title: {
            text: "充电量趋势",
            left: 30
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 30,
            bottom: 30,
        },
        xAxis: {
            type: 'category',
            data: xAxis,
            boundaryGap: false,
            splitNumber: 7,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true
            }
        },
        legend: {
            data: ["上周", "本周"],
            right: 30
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: curWeek,
            name: '本周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: GREEN_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false
        }, {
            data: lastWeek,
            name: '上周',
            type: 'line',
            smooth: true,
            itemStyle: {
                color: RED_COLOR
            },
            lineStyle: {
                width: 3
            },
            showSymbol: false,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: `rgba(${RED_RGB},0.8)`
                }, {
                    offset: 0.9,
                    color: `rgba(${RED_RGB},0)`
                }])
            }
        }]
    }
}

export function DashboardDischargeOption(data) {
    const batteryStatus = [
        { name: '充电中', value: 20 },
        { name: '放电中', value: 30 },
        { name: '待机中', value: 10 },
    ]
    const covert = [33, 29];

    const leftData = []
    let total = 0
    batteryStatus.map(item => { total += item.value })
    for (var i = 0; i < batteryStatus.length; i++) {
        leftData.push({
            value: batteryStatus[i].value,
            name: batteryStatus[i].name,
            itemStyle: {
                normal: {
                    color: colors[i],
                    borderRadius: 15,
                    shadowBlur: 10,
                    shadowColor: colors[i]
                }
            }
        }, {
            value: Math.round(total * 0.02),
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        })
    }

    const rich = (color) => {
        return {
            d: {
                color: color,
                fontSize: 18,
                fontWeight: "bold",
            },
            b: {
                color: color
            }
        }
    }
    return {
        title: {
            text: "电池状态总览",
            left: 30
        },
        legend: {
            data: batteryStatus.map(item => item.name),
            right: 30
        },
        tooltip: {
            show: false,
        },
        series: [
            // 背景圆
            {
                type: 'pie',
                radius: [0, '75%'],
                center: ['25%', '55%'],
                color: "rgba(255,255,255,0.5)",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 30,
                        shadowColor: `rgba(${GREEN_RGB}, 0.2)`,
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['45%', '60%'],
                center: ['25%', '55%'],
                label: {
                    show: false,
                    position: 'center'
                },
                name: '访问来源',
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                        color: '#8F94A4',
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{d}%\n{b}'
                    }
                },
                labelLine: {
                    show: false
                },
                data: leftData
                // No encode specified, by default, it is '2012'.
            },
            // 左大饼图中间白色的圆
            {
                type: 'pie',
                radius: [0, '32%'],
                center: ['25%', '55%'],
                color: "#fff",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 25,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['20%', '32%'],
                center: ['60%', '35%'],
                startAngle: covert[0] * 0.01 * 180,
                data: [
                    {
                        name: "充电中",
                        value: covert[0],
                        itemStyle: {
                            color: colors[0]
                        },
                        label: {
                            show: true,
                            formatter: '{d|+{d}%}\n{b|一小时内待机 -> 充电}',
                            rich: rich(GREEN_COLOR)
                        }

                    },
                    {
                        name: '待机中',
                        value: 100 - covert[0], itemStyle: {
                            color: colors[2]
                        }
                    }
                ],
                labelLine: {
                    show: false,
                    length2: 0,
                },
                label: {
                    show: false
                },
                itemStyle: {
                    borderWidth: 5,
                    borderRadius: 5,
                    borderColor: '#fff',
                }
            }, {
                type: 'pie',
                radius: ['20%', '32%'],
                center: ['60%', '80%'],
                startAngle: covert[1] * 0.01 * 180,
                data: [
                    {
                        name: "放电中",
                        value: covert[1],
                        itemStyle: {
                            color: colors[1]
                        },
                        label: {
                            show: true,
                            formatter: '{d|+{d}%}\n{b|一小时内待机 -> 放电}',
                            rich: rich(RED_COLOR)
                        }
                    },
                    {
                        name: '待机中',
                        value: 100 - covert[1], itemStyle: {
                            color: colors[2]
                        }
                    }
                ],
                label: {
                    show: false
                },
                labelLine: {
                    show: false,
                    length2: 0,
                },
                itemStyle: {
                    borderWidth: 5,
                    borderRadius: 5,
                    borderColor: '#fff'
                }
            }]
    }
}

export function OrderStatusOption(data) {
    const orderStatus = data
    const leftData = []
    let total = 0
    orderStatus.map(item => { total += item.value })
    for (var i = 0; i < orderStatus.length; i++) {
        leftData.push({
            value: orderStatus[i].value,
            name: orderStatus[i].name,
            itemStyle: {
                normal: {
                    color: newcolors[i],
                    borderRadius: 15,
                    shadowBlur: 10,
                    shadowColor: newcolors[i]
                }
            }
        }, {
            value: Math.round(total * 0.02),
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        })
    }

    const rich = (color) => {
        return {
            d: {
                color: color,
                fontSize: 18,
                fontWeight: "bold",
            },
            b: {
                color: color
            }
        }
    }
    return {
        title: {
            text: "订单状态总览",
            left: 20
        },
        legend: {
            data: orderStatus.map(item => item.name),
            top: 'bottom'
        },
        tooltip: {
            show: false,
        },
        series: [
            // 背景圆
            {
                type: 'pie',
                radius: [0, '60%'],
                center: ['50%', '50%'],
                color: "rgba(255,255,255,0.5)",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 30,
                        shadowColor: `rgba(${GREEN_RGB}, 0.2)`,
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['40%', '50%'],
                center: ['50%', '50%'],
                label: {
                    show: false,
                    position: 'center'
                },
                name: '访问来源',
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                        color: '#8F94A4',
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{d}%\n{b}'
                    }
                },
                labelLine: {
                    show: false
                },
                data: leftData
                // No encode specified, by default, it is '2012'.
            },
            // 左大饼图中间白色的圆
            {
                type: 'pie',
                radius: [0, '25%'],
                center: ['50%', '50%'],
                color: "#fff",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 25,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        color: "#fff"
                    }
                },
            },
        ]
    }
}

export function WarningStatusOption(data) {
    const orderStatus = data
    const leftData = []
    const warningcolor=[NEW_RED_COLOR,NEW_ORANGE_COLOR]
    let total = 0
    orderStatus.map(item => { total += item.value })
    for (var i = 0; i < orderStatus.length; i++) {
        leftData.push({
            value: orderStatus[i].value,
            name: orderStatus[i].name,
            itemStyle: {
                normal: {
                    color: warningcolor[i],
                    borderRadius: 15,
                    shadowBlur: 10,
                    shadowColor: warningcolor[i]
                }
            }
        }, {
            value: Math.round(total * 0.02),
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        })
    }

    const rich = (color) => {
        return {
            d: {
                color: color,
                fontSize: 18,
                fontWeight: "bold",
            },
            b: {
                color: color
            }
        }
    }
    return {
        title: {
            text: "报警状态总览",
            left: 20
        },
        legend: {
            data: orderStatus.map(item => item.name),
            top: 'bottom'
        },
        tooltip: {
            show: false,
        },
        series: [
            // 背景圆
            {
                type: 'pie',
                radius: [0, '60%'],
                center: ['50%', '50%'],
                color: "rgba(255,255,255,0.5)",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 30,
                        shadowColor: `rgba(${GREEN_RGB}, 0.2)`,
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['40%', '50%'],
                center: ['50%', '50%'],
                label: {
                    show: false,
                    position: 'center'
                },
                name: '访问来源',
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                        color: '#8F94A4',
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{d}%\n{b}'
                    }
                },
                labelLine: {
                    show: false
                },
                data: leftData
                // No encode specified, by default, it is '2012'.
            },
            // 左大饼图中间白色的圆
            {
                type: 'pie',
                radius: [0, '25%'],
                center: ['50%', '50%'],
                color: "#fff",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 25,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        color: "#fff"
                    }
                },
            },
        ]
    }
}

export function ChargeStatusOption(data) {
    const chargeStatus = data
    const leftData = []
    let total = 0
    chargeStatus.map(item => { total += item.value })
    for (var i = 0; i < chargeStatus.length; i++) {
        leftData.push({
            value: chargeStatus[i].value,
            name: chargeStatus[i].name,
            itemStyle: {
                normal: {
                    color: colors[i],
                    borderRadius: 15,
                    shadowBlur: 10,
                    shadowColor: colors[i],
                }
            }
        }, {
            value: Math.round(total * 0.02),
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        })
    }

    const rich = (color) => {
        return {
            d: {
                color: color,
                fontSize: 18,
                fontWeight: "bold",
            },
            b: {
                color: color
            }
        }
    }
    return {
        title: {
            text: "电量状态总览",
            left: 20
        },
        legend: {
            data: chargeStatus.map(item => item.name),
            top: 'bottom'
        },
        tooltip: {
            show: false,
        },
        series: [
            // 背景圆
            {
                type: 'pie',
                radius: [0, '60%'],
                center: ['50%', '50%'],
                color: "rgba(255,255,255,0.5)",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 30,
                        shadowColor: `rgba(${GREEN_RGB}, 0.2)`,
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['40%', '50%'],
                center: ['50%', '50%'],
                label: {
                    show: false,
                    position: 'center'
                },
                name: '访问来源',
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                        color: '#8F94A4',
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{d}%\n{b}'
                    }
                },
                labelLine: {
                    show: false
                },
                data: leftData
                // No encode specified, by default, it is '2012'.
            },
            // 左大饼图中间白色的圆
            {
                type: 'pie',
                radius: [0, '25%'],
                center: ['50%', '50%'],
                color: "#fff",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 25,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        color: "#fff"
                    }
                },
            },
        ]
    }
}

export function StationBatteryOption(data) {
    const batteryStatus = [
        { name: '充电中', value: 20 },
        { name: '放电中', value: 30 },
        { name: '待机中', value: 10 },
    ]
    const covert = [33, 29];

    const leftData = []
    let total = 0
    batteryStatus.map(item => { total += item.value })
    for (var i = 0; i < batteryStatus.length; i++) {
        leftData.push({
            value: batteryStatus[i].value,
            name: batteryStatus[i].name,
            itemStyle: {
                normal: {
                    color: colors[i],
                    borderRadius: 15,
                    shadowBlur: 10,
                    shadowColor: colors[i]
                }
            }
        }, {
            value: Math.round(total * 0.02),
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        })
    }

    const rich = (color) => {
        return {
            d: {
                color: color,
                fontSize: 18,
                fontWeight: "bold",
            },
            b: {
                color: color
            }
        }
    }
    return {
        title: {
            text: "电池状态总览",
            left: 30
        },
        legend: {
            data: batteryStatus.map(item => item.name),
            right: 30
        },
        tooltip: {
            show: false,
        },
        series: [
            // 背景圆
            {
                type: 'pie',
                radius: [0, '75%'],
                center: ['25%', '55%'],
                color: "rgba(255,255,255,0.5)",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 30,
                        shadowColor: `rgba(${GREEN_RGB}, 0.2)`,
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['45%', '60%'],
                center: ['25%', '55%'],
                label: {
                    show: false,
                    position: 'center'
                },
                name: '访问来源',
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                        color: '#8F94A4',
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{d}%\n{b}'
                    }
                },
                labelLine: {
                    show: false
                },
                data: leftData
                // No encode specified, by default, it is '2012'.
            },
            // 左大饼图中间白色的圆
            {
                type: 'pie',
                radius: [0, '32%'],
                center: ['25%', '55%'],
                color: "#fff",
                data: [100],
                silent: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 25,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        color: "#fff"
                    }
                },
            },
            {
                type: 'pie',
                radius: ['20%', '32%'],
                center: ['60%', '35%'],
                startAngle: covert[0] * 0.01 * 180,
                data: [
                    {
                        name: "充电中",
                        value: covert[0],
                        itemStyle: {
                            color: colors[0]
                        },
                        label: {
                            show: true,
                            formatter: '{d|+{d}%}\n{b|一小时内待机 -> 充电}',
                            rich: rich(GREEN_COLOR)
                        }

                    },
                    {
                        name: '待机中',
                        value: 100 - covert[0], itemStyle: {
                            color: colors[2]
                        }
                    }
                ],
                labelLine: {
                    show: false,
                    length2: 0,
                },
                label: {
                    show: false
                },
                itemStyle: {
                    borderWidth: 5,
                    borderRadius: 5,
                    borderColor: '#fff',
                }
            }, {
                type: 'pie',
                radius: ['20%', '32%'],
                center: ['60%', '80%'],
                startAngle: covert[1] * 0.01 * 180,
                data: [
                    {
                        name: "放电中",
                        value: covert[1],
                        itemStyle: {
                            color: colors[1]
                        },
                        label: {
                            show: true,
                            formatter: '{d|+{d}%}\n{b|一小时内待机 -> 放电}',
                            rich: rich(RED_COLOR)
                        }
                    },
                    {
                        name: '待机中',
                        value: 100 - covert[1], itemStyle: {
                            color: colors[2]
                        }
                    }
                ],
                label: {
                    show: false
                },
                labelLine: {
                    show: false,
                    length2: 0,
                },
                itemStyle: {
                    borderWidth: 5,
                    borderRadius: 5,
                    borderColor: '#fff'
                }
            }]
    }
}

export function StationStatOption(data) {
    var colors = [
        {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: "rgba(255,103,114, 1)"
            },
            {
                offset: 1, color: "rgba(243,152,158, 0)"
            }
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: "rgba(158,5,16, 1)"
            },
            {
                offset: 1, color: "rgba(255,171,172, 1)"
            }
            ]),
            borderWidth: 2
        },
        {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0, color: 'rgba(15,197,243,1)'
                },
                {
                    offset: 1, color: 'rgba(15,197,243,0)'
                }
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0, color: 'rgba(0,0,0, 1)'
                },
                {
                    offset: 1, color: 'rgba(15,197,243,1)'
                }
            ]),
            borderWidth: 2
        },
        {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0, color: 'rgba(61,126,235, 1)'
                },
                {
                    offset: 1, color: 'rgba(15,197,243,0)'
                }
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0, color: 'rgba(0,0,0, 1)'
                },
                {
                    offset: 1, color: 'rgba(61,126,235, 1)'
                }
            ]),
            borderWidth: 2
        }
    ];
    var barWidth = 10;

    const { xAxis, connects, warns, uploads } = data;
    return {
        title: {
            text: "近3日数据统计",
            left: 30
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 30,
            bottom: 30,
        },
        xAxis: {
            type: 'category',
            data: xAxis,
            axisLine: {
                lineStyle: {
                    color: 'black' //左侧显示线
                }
            },
            axisLabel: {
                textStyle: {
                    fontFamily: 'Arial'
                }
            },
        },
        legend: {
            data: ["连接次数", "上传次数", "异常次数"],
            right: 45
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'black' //左侧显示线
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'grey'
                }
            },
            axisLabel: {
                fontSize: 14
            }
        },
        series: [{
            data: uploads,
            name: '上传次数',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: colors[2]
        }, {
            data: connects,
            name: '连接次数',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: colors[1]
        }, {
            data: warns,
            name: '异常次数',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: colors[0]
        }]
    }
}

export function ScreenTimeIncomeOption(data) {
    return {
        title: {
            show: false
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0,179,244,0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0,179,244,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: {
            top: '5%',
            left: '5%',
            right: '5%',
            bottom: '10%',
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true,
                color: '#09364F'
            },
            splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                    color: '#f00'
                },
            },
            axisLabel: {
                color: '#4C626E'
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],

        }],

        yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: '#d1e6eb',
                },
            },

        }],
        series: [{
            name: '注册总量',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 15,
            lineStyle: {
                normal: {
                    color: "#00b3f4",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: false,
            },
            itemStyle: {
                color: "#000",
                borderColor: "#00b3f4",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,179,244,0.3)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(0,179,244,0)'
                    }
                    ], false),
                    shadowColor: 'rgba(0,179,244, 0.9)',
                    shadowBlur: 20
                }
            },
            data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
        }
        ]
    }
}

export function ScreenPayMethodOption(data) {
    let legend = {
        "微信支付": 13,
        "支付宝": 12,
        "银联支付": 30
    }
    return {
        color: ['#00A3FD', '#FFB642', '#FE645F'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}$ ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: ['微信支付', '支付宝', '银联支付'],
            orient: 'vertical',
            right: '5%',
            top: '15%',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 20,
            borderRadius: 15,
            formatter: function (name) {
                return `{a|${legend[name]}%}\n{b|${name}}`
            },
            textStyle: {
                padding: [0, 0, 2, 4],
                rich: {
                    a: {
                        color: "#fff",
                        fontSize: "18px",
                    },
                    b: {
                        color: "#386d88",
                        lineHeight: 24,
                        fontSize: "14px"
                    }
                }
            }
        },
        series: [{
            name: 'TITLE',
            type: 'pie',
            clockwise: false,
            startAngle: 90,
            radius: ['35%', '80%'],
            center: ['35%', '54%'],
            roseType: 'area', //area
            data: [{
                value: 435,
                name: '微信支付'
            },
            {
                value: 310,
                name: '支付宝'
            },
            {
                value: 234,
                name: '银联支付'
            }
            ],
            itemStyle: {
                normal: {
                    borderColor: '#273454',
                    borderWidth: '5',
                },
            },
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
        }],
    }
}

export function OrderTypeOption(data) {

    let legend = data
    return {
        title: {
            text: "订单类型总览",
            left: 20
        },
        color: newcolors,
        shadowColor: newcolors,

        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: ['微信支付', '支付宝', '银联支付'],
            orient: 'vertical',
            left: 20,
            top: 'bottom',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 20,
            borderRadius: 15,
            formatter: function (name) {
                return `{a|${legend[name]}%}\n{b|${name}}`
            },
            textStyle: {
                padding: [0, 0, 2, 4],
                rich: {
                    a: {
                        color: "#F96E5B",
                        fontSize: "18px",
                    },
                    b: {
                        color: "#386d88",
                        lineHeight: 24,
                        fontSize: "14px"
                    }
                }
            }
        },
        series: [{
            name: '今日订单',
            type: 'pie',
            clockwise: false,
            startAngle: 90,
            radius: ['20%', '60%'],
            center: ['70%', '55%'],
            roseType: 'area', //area
            data: [{
                value: 435,
                name: '微信支付'
            },
            {
                value: 310,
                name: '支付宝'
            },
            {
                value: 234,
                name: '银联支付'
            }
            ],
            itemStyle: {
                normal: {
                    borderRadius: 25,
                    shadowBlur: 3,

                }
            },

            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
        }],
    }
}

export function OrderBmuOption(data) {

    const bmu = data
    return {
        title: {
            text: "BMU订单统计",
            left: 20
        },
        color: newcolors,
        shadowColor: newcolors,
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],

            top: 'bottom',
            itemWidth: 10,
            itemHeight: 10,
            borderRadius: 15,
            formatter: function (name) {
                return `{a|${name}}`
            },
            textStyle: {
                padding: [0, 0, 2, 4],
                rich: {

                    a: {
                        color: "#386d88",
                        lineHeight: 24,
                        fontSize: "14px"
                    }
                }
            }
        },
        series: [{
            name: 'BMU',
            type: 'pie',
            startAngle: 90,
            radius: ['10%', '45%'],
            center: ['50%', '45%'],
            roseType: 'area', //area
            data: bmu,
            itemStyle: {
                normal: {
                    borderRadius: 20,
                    shadowBlur: 2,

                }
            },

        }],
    }
}

export function WarningTypeOption(data) {
    const warningcolor=[NEW_RED_COLOR,NEW_ORANGE_COLOR,NEW_YELLOW_COLOR]
    let legend = data
    return {
        title: {
            text: "报警类型总览",
            left: 20
        },
        color: warningcolor,
        shadowColor: warningcolor,

        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: ['温度', '电压', '烟雾'],
            orient: 'vertical',
            left: 20,
            top: 'bottom',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 20,
            borderRadius: 15,
            formatter: function (name) {
                return `{a|${legend[name]}%}\n{b|${name}}`
            },
            textStyle: {
                padding: [0, 0, 2, 4],
                rich: {
                    a: {
                        color: "#F96E5B",
                        fontSize: "18px",
                    },
                    b: {
                        color: "#386d88",
                        lineHeight: 24,
                        fontSize: "14px"
                    }
                }
            }
        },
        series: [{
            name: '今日报警',
            type: 'pie',
            clockwise: false,
            startAngle: 90,
            radius: ['20%', '60%'],
            center: ['70%', '55%'],
            roseType: 'area', //area
            data: [{
                value: 235,
                name: '温度'
            },
            {
                value: 300,
                name: '电压'
            },
            {
                value: 134,
                name: '烟雾'
            }
            ],
            itemStyle: {
                normal: {
                    borderRadius: 25,
                    shadowBlur: 3,

                }
            },

            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
        }],
    }
}

export function WarningBmuOption(data) {

    const bmu = data
    return {
        title: {
            text: "BMU报警统计",
            left: 20
        },
        color: newcolors,
        shadowColor: newcolors,
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],

            top: 'bottom',
            itemWidth: 10,
            itemHeight: 10,
            borderRadius: 15,
            formatter: function (name) {
                return `{a|${name}}`
            },
            textStyle: {
                padding: [0, 0, 2, 4],
                rich: {

                    a: {
                        color: "#386d88",
                        lineHeight: 24,
                        fontSize: "14px"
                    }
                }
            }
        },
        series: [{
            name: 'BMU',
            type: 'pie',
            startAngle: 90,
            radius: ['10%', '45%'],
            center: ['50%', '45%'],
            roseType: 'area', //area
            data: bmu,
            itemStyle: {
                normal: {
                    borderRadius: 20,
                    shadowBlur: 2,

                }
            },

        }],
    }
}

export function ScreenBatteryOption(data) {
    let color = ['#00A1F5', '#3262FE', '#FFBE45', '#FE6664', '#0034ff'];
    let chartData = [
        { value: 40083 },
        { value: 33974 },
        { value: 20400 },
        { value: 15021 }
    ];
    let sum = 0;
    let pieSeries = [];

    // 数据处理
    chartData.forEach((v, i) => {
        sum = sum + v.value;
    })

    // 图表option整理
    chartData.forEach((v, i) => {
        pieSeries.push({
            name: '电池剩余电量信息',
            type: 'pie',
            hoverAnimation: false,
            radius: [75 - i * 20 + '%', 67 - i * 20 + '%'],
            center: ["50%", "50%"],
            label: {
                show: false
            },
            data: [{
                value: v.value,
                name: i + "",
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#062942',
                    borderWidth: 2
                }
            }, {
                value: sum - v.value,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)"
                }
            }]
        });
        pieSeries.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            hoverAnimation: false, //鼠标移入变大
            radius: [75 - i * 20 + '%', 67 - i * 20 + '%'],
            center: ["50%", "50%"],
            label: {
                show: false
            },
            data: [{
                value: 10,
                itemStyle: {
                    color: "#062942"
                }
            }]
        });
    })

    let option = {
        color: color,
        grid: {
            top: '12%',
            bottom: '54%',
            left: "40%",
            containLabel: false
        },
        xAxis: [{
            show: false
        }],
        series: pieSeries
    };

    return option
}

export function ScreenAccessOption(data) {
    var xData = ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00"];
    const dataBase = {
        'APP访问': [400, 500, 600, 300, 200, 100],
        '微信小程序': [350, 450, 550, 550, 300, 200],
    }
    const color = ['#00ADFF', '#315FFC', '#0CEBEA', '#1fa9e3']
    let serviceList = []
    let index = 0
    for (let key in dataBase) {
        let item = {
            name: key,
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: color[index]
                    }, {
                        offset: 1,
                        color: 'rgba(18,155,249,0)'
                    }]),
                    barBorderRadius: 11,
                }
            },
            data: dataBase[key]
        }
        index++
        serviceList.push(item)
    }
    var option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'none',
            padding: 5,
            formatter: function (param) {
                var resultTooltip = "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;color:#fff'>" +
                    "<div style='text-align:center;'>" + param[0].name + "</div>" +
                    "<div style='padding-top:5px;color:#fff'>";
                for (var i = 0; i < param.length; i++) {
                    resultTooltip +=
                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + param[i].color.colorStops[0].color + ";'></span>" +
                        "<span> " + param[i].seriesName + ": </span>" +
                        "<span>" + param[i].value + "</span></span></br>"

                }
                resultTooltip += "</div>";

                return resultTooltip
            }
        },
        grid: {
            left: '30',
            top: '10%',
            right: '0%',
            bottom: '10%',
        },
        legend: {
            show: false,
            icon: 'circle',
        },
        xAxis: [{
            type: 'category',
            data: xData,
            axisLabel: {
                show: true,
                fontSize: 10,
                textStyle: {
                    color: "#C9C8CD" //X轴文字颜色
                }
            },
            axisTick: {
                show: false //不显示刻度
            },
            // boundaryGap: false,
            splitLine: {
                show: false,
                width: 0.08,
                lineStyle: {
                    type: "solid",
                    color: "#03202E"
                }
            }
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: "#C9C8CD" //X轴文字颜色
                }
            },
            axisLine: {
                inside: false,
                show: true,
            },
            splitLine: {
                show: false
            }
        }
        ],
        series: serviceList
    };
    return option
}